<template>
  <div class="floor-info">
    <!-- <div v-for="floor in data" :key="floor.level" class="floor-item" @click="showFloorDetail(floor)">
      <div class="floor-header">
        <span class="floor-level">{{ floor.level }}F</span>
        <span class="floor-status" :class="getFloorStatus(floor)"></span>
      </div>
      <div class="floor-stats">
        <div class="stat-item">
          <span class="label">总床位</span>
          <span class="value">{{ floor.totalBeds }}</span>
        </div>
        <div class="stat-item">
          <span class="label">当前人数</span>
          <span class="value">{{ floor.currentCount }}</span>
        </div>
        <div class="stat-item">
          <span class="label">使用率</span>
          <span class="value">{{ calculateUsageRate(floor) }}%</span>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  data: {
    type: Array,
    default: () => [
      { level: 1, currentCount: 16, totalBeds: 20 },
      { level: 2, currentCount: 18, totalBeds: 20 },
      { level: 3, currentCount: 12, totalBeds: 20 },
      { level: 4, currentCount: 14, totalBeds: 20 },
      { level: 5, currentCount: 10, totalBeds: 20 }
    ]
  }
})

const emit = defineEmits(['showDetail'])

const calculateUsageRate = (floor) => {
  return Math.round((floor.currentCount / floor.totalBeds) * 100)
}

const getFloorStatus = (floor) => {
  const usageRate = calculateUsageRate(floor)
  if (usageRate >= 90) return 'status-full'
  if (usageRate >= 70) return 'status-busy'
  if (usageRate >= 30) return 'status-normal'
  return 'status-empty'
}

const showFloorDetail = (floor) => {
  emit('showDetail', floor)
}
</script>

<style scoped>
.floor-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1vh;
  padding: 1vh;
  height: 100%;
  overflow-y: auto;
  background: url("@/assets/layer/mock1.png") no-repeat center;
  width: 149px;
  height: 742px;
}

.floor-item {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 1.5vh;
  cursor: pointer;
  transition: all 0.3s;
}

.floor-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.floor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.floor-level {
  font-weight: bold;
  color: #409EFF;
  font-size: 16px;
}

.floor-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.status-full {
  background-color: #F56C6C;
}

.status-busy {
  background-color: #E6A23C;
}

.status-normal {
  background-color: #67C23A;
}

.status-empty {
  background-color: #909399;
}

.floor-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.stat-item .label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.stat-item .value {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}

/* 滚动条样式 */
.floor-info::-webkit-scrollbar {
  width: 6px;
  background-color: transparent;
}

.floor-info::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.floor-info::-webkit-scrollbar-track {
  background-color: transparent;
}
</style> 